var template = `
  <div>
    <HeaderOne v-if="num == 1" />
    <HeaderTwo v-else-if="num == 2"/>
    <HeaderThree v-else-if="num == 3"  />
    <HeaderFour v-else-if="num == 4 || num == 10" />
    <HeaderFive v-else-if="num == 5" />
    <HeaderSix v-else-if="num == 6|| num == 9"  />
    <HeaderSeven v-else-if="num == 8 || num == 7 "  />
    
    <Main :num="num" :show='show'/>
    <Footer :num="num" />

    
    <div class="reward" v-show="show" >
      <Info />
      <Card />
    </div>
  </div>
`

Vue.component('HeaderOne', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <div class="status_list">
        <ul>
          <li class="target">
            <div></div>
            <span>已拍下</span>
          </li>
          <li>
            <div></div>
            <span>待付款</span>
          </li>
          <li>
            <div></div>
            <span>待发货</span>
          </li>
          <li>
            <div class="last"></div>
            <span>待确认</span>
          </li>
        </ul>
      </div>
      <p>已拍下，等待买家付款</p>
      <p>{{vm.goods_info[0].create_time | sy_time_filter}}未支付，订单将自动关闭</p>
    </div>
  </header>
  `
})
Vue.component('HeaderTwo', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <div class="status_list">
        <ul>
          <li class="target">
            <div></div>
            <span>已拍下</span>
          </li>
          <li class="target">
            <div></div>
            <span>已付款</span>
          </li>
          <li>
            <div></div>
            <span>待发货</span>
          </li>
          <li>
            <div class="last"></div>
            <span>待收货</span>
          </li>
        </ul>
      </div>
      <p style="margin-top: 15px;">买家已付款，请您及时发货</p>
    </div>
  </header>
  `
})

Vue.component('HeaderThree', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <div class="status_list">
        <ul>
          <li class="target">
            <div></div>
            <span>已拍下</span>
          </li>
          <li class="target">
            <div></div>
            <span>已付款</span>
          </li>
          <li class="target">
            <div></div>
            <span>已发货</span>
          </li>
          <li>
            <div class="last"></div>
            <span>待确认</span>
          </li>
        </ul>
      </div>
      <p>已发货，等待买家确认收货</p>
      <p>1小时53分后系统将自动确认收获</p>
    </div>
  </header>
  `
})

Vue.component('HeaderFour', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="/public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <div class="status_list">
        <ul>
          <li class="target">
            <div></div>
            <span>已拍下</span>
          </li>
          <li class="target">
            <div></div>
            <span>已付款</span>
          </li>
          <li class="target">
            <div></div>
            <span>已发货</span>
          </li>
          <li class="target">
            <div class="last"></div>
            <span>已确认</span>
          </li>
        </ul>
      </div>
      <p style="margin-top: 15px;">交易成功！赶紧去评价吧！</p>
    </div>
  </header>
  `
})
Vue.component('HeaderFive', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <p style="font-size: 22px; margin-bottom: 20px;">退款纠纷中</p>
      <p></p>
    </div>
  </header>
  `
})
Vue.component('HeaderSix', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <p style="font-size: 22px; margin-bottom: 20px;">交易关闭</p>
      <p>超时关闭</p>
    </div>
  </header>
  `
})
Vue.component('HeaderSeven', {
  template: `
  <header>
    <div class="header-top">
      <a onclick="javascript:window.history.go(-1);">
        <img src="../../public/img/fanhuiWhite.png" alt="">
      </a>
      <span>订单详情</span>
    </div>
    <div class="status">
      <p style="font-size: 22px; margin-bottom: 20px;">交易完成</p>
      <p></p>
    </div>
  </header>
  `
})

Vue.component('Main', {
  props: ['num', 'show'],
  data() {
    return {
      // show: true
    }
  },
  methods: {
    // 复制到剪切板
    copy: function (e) {
      // 选取兄弟元素并得到内容
      var dom = $(e.currentTarget).siblings('span');
      var context = dom.text();
      // 复制到剪切板
      //要先创建一个input框
      var input = document.createElement('input');
      input.setAttribute('id', 'copyInput');
      input.setAttribute('value', context);
      document.getElementsByTagName('body')[0].appendChild(input);
      $('#copyInput').get(0).select();
      document.execCommand("Copy");
      // 提示
      vant.Toast('已复制订单号到剪切板');
      //移除input
      $('#copyInput').remove();
    }
  },
  template: `
  <main v-for="item in $root.goods_info">
    <div class="msg">
      <ul>
        <li class="commodity">
          <p>商品信息</p>
          <div>
            <img :src="item.aid.type.b.icon" alt="">
            <div>
              <p>
                <span>{{item.aid.name}}</span>
              </p>
              <p>
                <span>¥{{item.price}} </span>&nbsp;&nbsp;
                <span>数量:{{item.amount}}</span>&nbsp;&nbsp;
                <span style="color: #3D3D3D;">商品总价:￥{{(item.amount*item.price).toFixed(2)}}</span>
              </p>
              <p>
                <span>卖家优惠:￥10.00</span>
                <span style="color: #F15D44;">应付款:￥111.00</span>
              </p>
            </div>
          </div>
          <div class="comments">
            <span>我的留言:</span>
            <input type="text" placeholder="点击输入留言…">
          </div>
        </li>
        <li class="article" v-if="num !=1 && num !=2">
          <p class="article_title">
            <span>交易物信息</span>
            <span class="article_time">首次查看时间 2019-2-13 16:12:30</span>
          </p>
          <div class="image">
            <span>信息截图类:</span>
            <button v-if="show" onclick="submitInfo()">提交信息/截图</button>
            <p v-else>
              <span>注册账号12345678</span>
              <img src="/public/img/food1.png" alt=""/> 
            </p>
          </div>
          <div class="look_card">
            <span>卡密图码类:</span>
            <button v-if="show" onclick="submitCard()">上传卡密/码图</button>
            <p v-else>
              <span>卷1:124235232232</span>
              <img src="/public/img/food1.png" alt="">
            </p>
          </div>

          <div class="btn" v-if="!show">
              <button onclick="javascript:window.location.href='/view/my/jiaoyiwuxinxi.html';">查看更多</button>
          </div>
        </li>
        <li class="seller">
          <p>买家信息</p>
          <div class="name">
            <p>用户名：{{$root.buyer_nickname}}</p>
            <p onclick="javascript:window.location.href='/view/message/message.html';">
              <img src="/public/img/xiaoxi_xq.png" alt="">联系他
            </p>
          </div>
          <div class="comments">
            <span>我的留言:</span>
            <input type="text" placeholder="无...">
          </div>
        </li>
        <li class="order">
          <p id="dingdan_info">
            <span>订单信息</span>
            <img src="/public/img/xialasan.png" alt="">
          </p>
          <div id="slide">
            <div>
              <span>订单号： </span>
              <p>
                <span style="color: #F06146; font-size: 10px; border: 1px solid #F06146; padding: 0 5px;"
                  @click="copy($event)"
                >复制</span>
                <span>{{$root.id}}</span>
              </p>
            </div>
            <div>
              <span>订单创建时间</span>
              <span>{{$root.order_ctime | timeFilter}}</span>

            </div>
            <div>
              <span>订单付款时间：</span>
              <span>{{$root.order_pay_ctime | timeFilter}} </span>
            </div>
            <div>
              <span>订单发货时间：</span>
              <span>{{$root.order_send_ctime | timeFilter}}</span>
            </div>
            <div>
              <span>补付款时间：</span>
              <span>{{$root.order_repay_ctime | timeFilter}} </span>
            </div>
            <div>
              <span>确认收货时间</span>
              <span>{{$root.order_get_ctime | timeFilter}} </span>
            </div>
          </div>
        </li>
        <li class="pay_num" v-if="num >=2">
          <p>支付信息</p>
          <div>
            <span>付款方式</span>
            <span>冻结金额支付: 199.00元</span>
          </div>
          <div>
            <span>补付款方式</span>
            <span>金额支付: 199.00元</span>
          </div>
          <div class="num num_color">
            <span>实付款: ￥118.0</span>
          </div>
          <div class="num">平台管理服务费: -￥8.00</div>
          <div class="num num_color">实到账: ￥110.0</div>
        </li>
      </ul>
    </div>
    </main>
  `
})

Vue.component('Footer', {
  props: ['num'],
  data() {
    return {
      // num: 3
    }
  },
  template: `
  <footer>
    <div v-if="num == 1" class="two_btn">
      <button class="one_btn" onclick="closeOrder()">关闭订单</button>
      <button onclick="remindPay()">提醒买家付款</button>
    </div>
    <div v-else-if="num == 2" class="one_btn">
      <button onclick="go()">立即发货</button>
    </div>
    <div v-else-if="num == 3" class="one_btn">
      <button onclick="remind_sh()">提醒收货</button>
    </div>
    <div v-else-if="num == 4" class="two_btn">
    <button onclick="delateOrder()">删除订单</button>
      <button onclick="javascript:window.location.href='/view/my/pingjia.html';">去评价</button>
    </div>
    <div v-else-if="num == 5" class="one_btn">
      <button onclick="javascript:window.location.href='/view/my/buyer_tuikuanYSQ.html';">查看退款详情</button>
    </div>
    <div v-else-if="num == 6 || num == 7" class="one_btn">
      <button onclick="delateOrder()">删除订单</button>
    </div>
    <div v-else-if="num == 8 || num == 9" class="two_btn">
      <button onclick="delateOrder()">删除订单</button>
      <button onclick="javascript:window.location.href='/view/my/buyer_tuikuanYSQ.html';">查看退款详情</button>
    </div>
    <div v-else-if="num == 10" class="two_btn_c">
    <button onclick="javascript:window.location.href='/view/my/buyer_tuikuanYSQ.html';">查看退款详情</button>
    <button onclick="javascript:window.location.href='/view/my/pingjia.html';">去评价</button>
    </div>
  </footer>
  `
})

// 这是提交信息/截图组件
Vue.component('Info', {
  template: `
  <div class="submit_info">
    <div class="submit_title">
      <p>
        <span>提交信息/截图</span>
      </p>
      <img onclick="guanbi()" src="/public/img/cancelSmall.png" alt="">
    </div>
    <div class="info_box">
      <div class="submit">        
        <div>
          <p>提交信息</p>
          <div></div>
        </div>

        <div>
          <p>上传截图</p>
          <div></div>
        </div>
      </div>  
    </div>
    <div class="btn">
      <button onclick="shangchuan()">确认上传</button>
    </div>
  </div>
  `
})
// 上传卡密/图码组件
Vue.component('Card', {
  template: `
  <div class="Card_info">
    <div class="Card_title">
      <p>
        <span>上传卡密/码图</span>
      </p>
      <img onclick="guanbi()" src="/public/img/cancelSmall.png" alt="">
    </div>
    <div class="info_box">
      <div class="automatic">
        <div class="auto_num">
          <span class="target dan">单张/批量码图</span>
          <span class="duo">批量卡密文本</span>
        </div>
        <!-- 图片卡密 -->
        <div class="sing">
          <p>
            <span>提示</span>
            <input type="button" value="批量上传截图" onclick='javascript:$("#hiddenFile").click();'>
            <input id="hiddenFile" type="file" style="display: none;" multiple name="image" accept=“image/*”
              onchange='handleInputChange'>
          </p>

          <ul>
            <li>
              <div class="num">券1</div>
              <div class="box">
                <div class="box_top">
                  <span>上传码图</span>
                  <div>
                    <input type="button" value="点击上传" onclick='javascript:$("#hiddenFileOne").click();'>
                    <img style="width: 16px; height: 16px;" src="/public/img/sctp.png" alt=""
                      onclick='javascript:$("#hiddenFileOne").click();'>
                    <input type="file" id="hiddenFileOne" name="image" style="display: none;" accept=“image/*”
                      onchange='handleInputChange'>
                  </div>
                </div>
                <div class="box_btm">
                  <span>卡密信息</span>
                  <input type="text" placeholder="上传码图后自动填充，也可自行手动修改">
                </div>
              </div>
            </li>
          </ul>
          <div class="add"></div>
        </div>
        <!-- 文字卡密 -->
        <div class="many">
          <textarea name="kami" placeholder="请输入卡密.."></textarea>
          <p>已上传<span style="color: #FF3C3C;">4</span> 张</p>
          <p>卡号与卡密用“空格”隔开，卡密与有效期“@”隔开 每一张卡占用一行“（Enter）”隔开</p>
        </div>
      </div>    
    </div>
    <div class="btn">
      <button onclick="shangchuan()">确认上传</button>
    </div>
  </div>
  `
})
// 剩余时间的过滤器,剩余支付时间,剩余退款订单处理时间,都暂时按照三天算
Vue.filter('sy_time_filter',function(val){
  var ctime = val*1000;//php的时间戳单位是秒,js是毫秒
  var gtime = ctime+(3*24*60*60*1000);//到期的时间
  var now_time = new Date().getTime();//现在的时间
  var sy_time = gtime - now_time;
  var d = Math.floor(sy_time/(24*60*60*1000));
  var d_time = d*24*60*60*1000;
  var h_sy_time = sy_time - d_time;
  var h = Math.floor(h_sy_time/(60*60*1000));
  var mi_sy_time = h_sy_time - h*60*60*1000;
  var mi = Math.floor(mi_sy_time/(60*1000));
  return d+'天'+h+'时'+mi+'分'
})

Vue.filter('timeFilter', function (val) {
  var date = new Date(val * 1000);
  var y = date.getFullYear()
  var m = date.getMonth() + 1;
  var d = date.getDate();
  var h = date.getHours();
  if ((h + "").length == 1) {
    h = "0" + h;
  }
  var mi = date.getMinutes();
  if ((mi + "").length == 1) {
    mi = "0" + mi;
  }
  var s = date.getSeconds();
  if ((s + "").length == 1) {
    s = "0" + s;
  }
  return y + "-" + m + "-" + d + "  " + h + ":" + mi + ":" + s;
})
Vue.filter('chulipic',function(val){
    var src = '';
    if(typeof val == 'object'){
        var count = 0;
        for(var p in val){
            console.log(val[p])
            if(count == 0){
                src = val[p]
            };
            count++;
        }
    }
    return src;
})
var vm = new Vue({
  // template,
  el: "#app",
  data: {
    num: 1,//1.未付款/已拍下 2./已付款/代发货 3.已发货 4.完成,但未评价 5.退款纠纷中 6.交易超时关闭 7.交易完成,已评价
    show: false,
    status: 0,
    id: '',//id就是订单号
    //商品信息
    goods_info: [{
      "id": "35",
      "aid": {
          "id": "87",
          "uid": {
              "id": "27",
              "nickname": "leiffadff",
              "avatar": "/uploads/images/20200324/a2b5cab27989bf57fca7e802fd6effe1.jpg"
          },
          "name": "leile发布",
          "type": {
              "a": {
                  "id": "39",
                  "name": "商业",
                  "icon": "/static/admin/img/none.png",
                  "fee": "2.00",
                  "confirm_time": "10",
                  "floor": "0"
              },
              "b": {
                  "id": "51",
                  "name": "河山旅游",
                  "icon": "/static/admin/img/none.png",
                  "fee": "2.00",
                  "confirm_time": "10",
                  "floor": "1"
              },
              "c": {
                  "id": "56",
                  "name": "十元卷",
                  "icon": "/static/admin/img/none.png",
                  "fee": "2.00",
                  "confirm_time": "10",
                  "floor": "2"
              },
              "d": {
                  "id": "57",
                  "name": "中行",
                  "icon": "/static/admin/img/none.png",
                  "fee": "2.00",
                  "confirm_time": "10",
                  "floor": "3"
              }
          },
          "amount": "12.00",
          "num": "2",
          "buyed_num": "2",
          "freeze": "24.00",
          "take_time": "10",
          "invalid_time": "1587535920",
          "ensure": "0",
          "ispay": "1",
          "create_time": "1587190359",
          "update_time": "1587190359",
          "status": "1",
          "delete_time": null
      },
      "in_uid": {
          "id": "27",
          "nickname": "leiffadff",
          "avatar": "/uploads/images/20200324/a2b5cab27989bf57fca7e802fd6effe1.jpg"
      },
      "out_uid": {
          "id": "29",
          "nickname": "路人甲#23&*（21",
          "avatar": "/uploads/images/20200409/baa768dce9383c7d290c59cb460fd5da.jpeg"
      },
      "price": "12.00",
      "amount": "2",
      "cost": "24.00",
      "refund": "0",
      "review": "0",
      "pay_time": "0",
      "send_time": "0",
      "repay_time": "0",
      "get_time": "0",
      "create_time": "1587190440",
      "update_time": "1587190440",
      "status": "0",
      "delete_time": null,
      "cards": []
  }, ],
    show_reward: false,
    show_info:false,//显示提交信息的遮罩层
    show_shouhuo_choose:false,
    upload_type: 'sing',
    upload_list: [
      {
        pic: '',//卡密图片id
        sn: '',//卡密图片
        src: '',//卡密图片
      }
    ],//上传卡密列表,默认有一个
    kami_text: '',
    jietu_tjxx:'',//提交信息/截图 信息
    jietu_list:[],//提交信息/截图 截图列表
    radio:'1',//1上传卡密,2提交信息/截图
  },
  methods: {
    init: function () {
      var id = app.GetQueryValue("id");
      this.id = id;
      this.get_goods_info();
    },
    //获取订单信息
    get_goods_info: function () {
      var that = this;
      $.post(app.webUrl + '/card/api_card/buy_order_lists', { id: that.id,type:'2' }, function (ret) {
        if (ret.code == '1') {
          that.goods_info = ret.data.data;
          that.get_num(ret.data.data[0])
        }
      })
    },
    //根据订单信息获取当前的num决定显示
    get_num: function (item) {
      console.log(item.status)
      // num一共有10种状态
      switch (item.status) {
        case '0':
          this.num = 1;//已拍下
          break;
        case '1': 
        //   if (item.review == '0') {
        //       console.log('fjajfdj')
        //     this.num = 4;//完成,但是未评价
        //   } else  (item.review == '1') {
        //     this.num = 7;//完成,已评价
        //   } 
          if(item.review == '3'){
            //   卖方已经评价
            this.num = 7;
          }else if(item.review == '1'){
             //都评价了 
            this.num = 7;
          }else{
              this.num = 4;
          }  
          break;
        case '2':
          this.num = 2;//已付款
          break;
        case '3':
          this.num = 3;//已发货
          break;
        case '4':
          this.num = 6;//超时关闭
          break;
        case '5':
          this.num = 5;//退款纠纷中
          break;
        case '6':
          this.num = 8;
          break;
      }
    },
    
    // 复制到剪切板
    copy: function (e) {
      // 选取兄弟元素并得到内容
      var dom = $(e.currentTarget).siblings('span');
      var context = dom.text();
      // 复制到剪切板
      //要先创建一个input框
      var input = document.createElement('input');
      input.setAttribute('id', 'copyInput');
      input.setAttribute('value', context);
      document.getElementsByTagName('body')[0].appendChild(input);
      $('#copyInput').get(0).select();
      document.execCommand("Copy");
      // 提示
      vant.Toast('已复制订单号到剪切板');
      //移除input
      $('#copyInput').remove();
    },
    // 切换订单信息的显示
    toggle_order_info_show: function () {
      $("#slide").slideToggle();
    },
    // 按钮,提醒付款
    btn_txfk: function (item) {
      var that = this;
      vant.Dialog.confirm({
        message: '确认提醒买家付款?',
      }).then(function () {
        $.post(app.webUrl + '/view/api_card/order_alert_pay', { id: item.id }, function (ret) {
          console.log(ret)
          if (ret.code == '1') {
            vant.Toast('已经提醒买家付款');
            // setTimeout(function(){
            //     $('.aBorder').get(0).click();
            // },1500);
          } else if (ret.code == '0') {
            vant.Toast(ret.msg)
          }
        })
      }).catch(function () {
        // return;
      });
    },
    open_choose_mask:function(){
        this.show_shouhuo_choose = true;
    },
    choose_confirm:function(){
        if(this.radio == '1'){
            // 卡密
            this.open_mask()
        }else if(this.radio == '2'){
            // 截图
            this.open_info();
        };
        this.show_shouhuo_choose = false;
    },
    open_mask:function(){
      this.show_reward = true;
    },
    // 按钮,立即发货
    btn_ljfh:function(item){
        var that = this;
        var url;
        if(item.type == '1'){
            url = '/view/api_card_sell/order_send'
        }else{
            url = '/view/api_card/order_send'
        }
        vant.Dialog.confirm({
            title:'确认发货',
            message: '请在10分钟内上传交易物流信息',
        }).then(function () {
            $.post(app.webUrl+url,{id:item.id},function(ret){
               console.log(ret)
               if(ret.code == '1'){
                vant.Toast('已确认发货');
                setTimeout(function(){
                    $('.aBorder').get(0).click();
                },1500);
               }else if(ret.code == '0'){
                   vant.Toast(ret.msg)
               }
           })
        }).catch(function () {
            // return;
        });
    },
    // 关闭reward遮罩层
    close_mask: function () {
      this.show_reward = false;
      this.upload_list = [
        {
          pic: '',//卡密图片id
          sn: '',//卡密图片
          src: '',//卡密图片
        }
      ]
    },
    // 上传图片
    upload_pic: function (type, e, item, index) {
      var that = this;
      var inputDom = e.currentTarget;
      var files = inputDom.files;
      var len;
      if (type == 'dan') {
        len = 1;
        // 单张上传
      } else {
        //批量
        len = files.length;
        that.upload_list = [];
      }
      for (var i = 0; i < len; i++) {
        var formdata = new FormData();
        formdata.append('file', files[i]);
        formdata.append('dir', 'images');
        $.ajax({
          url: app.webUrl + '/index/plugin/execute/_plugin/WxSdk/_controller/Api/_action/file', /*接口域名地址*/
          type: 'post',
          data: formdata,
          contentType: false,
          processData: false,
          success: function (ret) {
            var data = JSON.parse(ret);
            if (data.code == '1') {
              var obj = {
                pic: data.id,
                sn: data.qrtxt || '',
                src: data.url
              };
              // 添加到upload_list
              if (type == 'dan') {
                // 单张模式
                item.pic = data.id;
                item.sn = data.qrtxt || '';
                item.src = data.url;
              } else {
                // 批量模式
                that.upload_list.push(obj);
              }
            } else {
              vant.Toast('请上传清晰的二维码或者条形码图片')
            }
          }
        })
      }

    },
    click_upload: function (e) {
      $(e.currentTarget).siblings('.upload_pic').trigger('click');
    },
    // 删除对应的这个卡密
    del_card:function(index){
      console.log(index);
      this.upload_list.splice(index,1)
    },
    // 增加卡密图片列表
    add_pic: function () {
      this.upload_list.push({
        pic: '',//卡密图片id
        sn: '',//卡密图片
        src: '',//卡密图片地址
      })
    },
    // 切换上传卡密方式
    change_upload_type: function (type) {
      this.upload_type = type;
    },
    //确认上传
    btn_confrim_upload: function () {
      var that = this;
      vant.Dialog.confirm({
        message: '确认发货吗?',
      }).then(function () {
        that.confirm_upload();
      }).catch(function () {
        // return;
      });
    },
    confirm_upload: function () {
      console.log(8888)
      var that = this;
      var data_sn = that.upload_list.map(function (item) {
        return {
          pic: item.pic,
          sn: item.sn
        }
      }).filter(function (item) {
        if (item.pic != '' && item.sn != '') {
          return true;
        } else {
          return false;
        }
      });
      var value = null,num = 0;
      if (that.upload_type == 'sing') {
        // 单张/批量马图
        value = {
          id: that.goods_info[0].id,
          sn: JSON.stringify(data_sn)
        };
        num = data_sn.length;
      } else {
        //卡密文本
        var marr = that.kami_text.split(/\n/);
        var arr = marr.filter(function (item) {
          return item != "";
        }).map(function (item) {
          return {
            sn: item
          }
        });
        value = {
          id: that.goods_info[0].id,
          sn: JSON.stringify(arr)
        };
        num = arr.length;
      };
      if(num != (+that.goods_info[0].amount)){
        vant.Toast('发货数量与卡密数量不对应');
        return;
      }
      console.log(value);
      $.post(app.webUrl + '/view/api_card/order_send', value, function (ret) {
        console.log(ret);
        if (ret.code == '1') {
          vant.Toast('发货成功');
          that.close_mask();
          that.init();
        } else if (ret.code == '0') {
          vant.Toast(ret.msg);
        }
      }).fail(function (err) {
        console.log(err);
      })
    },
    click_upload:function(e){
      $(e.currentTarget).siblings('.upload_pic').trigger('click');
  },
  // 打开提交信息的遮罩层
  open_info:function(item){
      this.show_info = true;
      if(item){
          this.now_item = item;
      }
  },
  // 关闭提交信息的遮罩层
  close_info:function(){
      this.jietu_list = [];
      this.jietu_tjxx = '';
      this.show_info = false;
  },
  // 点击提交信息上传截图的+
  click_jietu_add:function(e){
      var dom = $(e.currentTarget).siblings('input');
      dom.trigger('click');
  },
  jietu_upload_pic:function(e){
      var that = this;
      var inputDom = e.currentTarget;
      var files = inputDom.files;
      var formdata = new FormData();
      formdata.append('file',files[0]);
      formdata.append('dir','images');
      $.ajax({
          url: app.webUrl+'/index/plugin/execute/_plugin/WxSdk/_controller/Api/_action/file', /*接口域名地址*/
          type:'post',
          data: formdata,
          contentType: false,
          processData: false,
          success:function(ret){
              var data = JSON.parse(ret);
              if(data.code == '1'){
                  that.jietu_list.push(data);
              }else{
                  vant.Toast('上传失败');
              }
          }
      })
  },
  // 点×删除截图上传的图片
  del_jietu_img:function(index){
      this.jietu_list.splice(index,1);
  },
    // 按钮,提醒发货
    btn_txsh: function (item) {
      var that = this;
      vant.Dialog.confirm({
        message: '确认提醒买家收货?',
      }).then(function () {
        $.post(app.webUrl + '/view/api_card/order_alert_get', { id: item.id }, function (ret) {
          console.log(ret)
          if (ret.code == '1') {
            vant.Toast('已经提醒买家收货');
            // setTimeout(function(){
            //     $('.aBorder').get(0).click();
            // },1500);
          } else if (ret.code == '0') {
            vant.Toast(ret.msg)
          }
        })
      }).catch(function () {
        // return;
      });
    },
    //评价
    btn_pingjia: function (item) {
      //
      var aid = item.id;
      window.location.href = "./pingjia.html?&aid=" + aid;
    },
    // 按钮,删除订单
    btn_delateOrder: function (item) {
      var that = this;
      // /view/api_card_sell/order_del
      vant.Dialog.confirm({
        message: '您确认要删除这个订单吗?',
      }).then(function () {
        $.post(app.webUrl + '/view/api_card/order_del', { id: item.id }, function (ret) {
          console.log(ret)
          if (ret.code == '1') {
            vant.Toast('已删除订单');
            window.history.go(-1);
          } else if (ret.code == '0') {
            vant.Toast(ret.msg)
          }
        })
      }).catch(function () {

      });
    },
    //查看退款详情
    btn_view_detail: function (item) {
      var id = item.id;
      window.location.href = './seller_tuikuan_dcl.html?&id=' + id;
    },
    // 关闭订单
    btn_cancel_order:function(item){
      var that = this;
      vant.Dialog.confirm({
        title:'取消订单',
        message: '您若因无货需关闭订单，必须及时将商品下架，否则可能受到平台对您采取限制发布商品的处理！',
      }).then(function () {
        $.post(app.webUrl + '/view/api_card/order_cancel', { id: item.id }, function (ret) {
          console.log(ret)
          if (ret.code == '1') {
            vant.Toast('已关闭订单');
            window.history.go(-1);
          } else if (ret.code == '0') {
            vant.Toast(ret.msg);
            that.init();
          }
        })
      }).catch(function () {

      });
    }
  },
  mounted: function () {
    this.init();
  },
  computed: {
    coid: function () {
      var coid;
      if (this.num == 1) {
        coid = 'HeaderOne'
      } else if (this.num == 2) {
        coid = 'HeaderTwo'
      } else if (this.num == 3) {
        coid = 'HeaderThree'
      } else if (this.num == 4 || this.num == 10) {
        coid = 'HeaderFour'
      } else if (this.num == '5') {
        coid = 'HeaderFive'
      } else if (this.num == 6 || this.num == 9) {
        coid = 'HeaderSix'
      } else if (this.num == 8 || this.num == 7) {
        coid = 'HeaderSeven'
      };
      return coid;
    }
  },

})


$(".password-div input").on("input", function (e) { //标签为password-div下的input添加oninput事件
  var number = 6; //定义输入最大值
  var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
  var list = $(".password-div ul li"); //定义list是li
  for (var i = 0; i < number; i++) { //for循环遍历将·放入li标签
    if (pw[i]) {
      $(list[i]).text("·");
    } else {
      $(list[i]).text("");
    };
  };
});



function submitInfo() {
  $('.reward').show()
  $('.reward .submit_info').show()
  // $('.reward .look_card').show()
  // $('body').css('overflow-y','hidden')
}

function submitCard() {
  $('.reward').show()
  $('.reward .Card_info').show()
}



function guanbi() {
  $('.reward').hide()
  $('.reward .submit_info').hide()
  $('.reward .Card_info').hide()
}


// 点击确认上传
function shangchuan() {
  $('.reward').hide()
  $('.reward .submit_info').hide()
  $('.reward .Card_info').hide()
}

// 点击代发货页面的确认上传的截图二字
function kami() {
  $('.submit_info').hide()
  $('.Card_info').show()
}

// 点击切换上传卡密方式
$('.auto_num span').click(function () {
  $('.auto_num span').removeClass('target')
  $(this).toggleClass('target')
})


$('.auto_num .dan').click(function () {
  $('.many').css('display', 'none')
  $('.sing').css('display', 'block')
})
$('.auto_num .duo').click(function () {
  $('.many').css('display', 'block')
  $('.sing').css('display', 'none')
})

// 关闭订单
function closeOrder() {
  swal({
    title: "关闭订单",
    text: "您若因无货需关闭订单，必须及时将商品下架，否则可能受到平台对您采取限制发布商品的处理！",
    buttons: ["取消", "确认"],
  })
    .then(function (flag) {
      if (flag) {
        window.location.href = '/view/my/chushou_dingdan.html'
      } else {
        // swal.close();
        location.reload()
      }
    });
}

// 提醒付款
function remindPay() {
  swal("已发送提醒!", {
    buttons: false,
    timer: 1000,
  });
}

//提醒收货
function remind_sh() {
  swal("已发送提醒!", {
    buttons: false,
    timer: 1000,
  });
}

function btn_delateOrder() {
  swal({
    title: "删除订单",
    text: "您确定要删除该订单吗？",
    buttons: ["取消", "确认"],
  })
    .then(function (flag) {
      if (flag) {
        window.location.href = '/view/my/chushou_dingdan.html'
      } else {
        // swal.close();
        location.reload()
      }
    });
}

function go() {
  swal({
    text: "请您在10分钟内上传交易物信息！",
    buttons: ["取消", "确认"],
  })
    .then(function (flag) {
      if (flag) {
        window.location.href = '/view/my/chushou_dingdan.html'
      } else {
        // swal.close();
        location.reload()
      }
    });
}

// 控制订单信息的显示
// $("#dingdan_info").click(function () {
//   $("#slide").slideToggle();
// });